<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@include file="../header.jsp" %> 
<head>
	<style>
		body{
			background: #F2F2F2;
		}
		.pordIxzj
		 {
			position: absolute;
			bottom: 1px;
			right: 1px;
			z-index: 50;
		}
		.group{
			margin-top:4px;
		}
		
		.group  .not{
			color: #CDCDCD;
			border:1px dashed #ccc!important;
		}
		
	 
		
		.group .not-img{
			color: #CDCDCD;
			border:1px dashed #ccc!important;
			outline:1px dashed #ccc!important;
		}
		.shopinfo{
		    padding-bottom: .2em;
		    line-height: 1;
		    font-size: 16px;
		    font-weight: 700;
		    color: #000;
		    font-family: "microsoft yahei";
		}
		
		.buy{
			margin-top:20px;
		}
		
		
		 
		
		.buynum{
			border: 1px solid #ccc;
			display:block;
			width: 38px;
			height: 20px;
			padding:5px 5px;
			font-weight: 700;
			line-height: 20px;
			background-position: 0 -80px;
			color: #333;
		}
		
		#star ul{
			padding-left:0px;
		}

		#star li {
			float: left;
			width: 24px;
			cursor: pointer;
			text-indent: -9999px;
			background: url(${ctx}/images/star.png) no-repeat;
		}


		#star li.on {
			background-position: 0 -28px;
		}
		
		.colorlist .current{
			border:1px solid #ff5500;
			outline: 1px solid #ff5500;   
		}
		
		.colorlist button.current{
			border:1px solid #ff5500;
		}
		
		.color-img{
			border:1px solid #eee;
			height:30px;
			outline: 1px solid #fff;
		}
		
		.color-img:hover{ 
			border:1px solid #ff5500;
			outline: 1px solid #ff5500;
		}
		
		.colorlist button:hover{
			border:1px solid #ff5500;
		}
		
		.pic-desc{
			font-size: 18px;
			color: #333;
			background: url(${ctx}/images/pic-desc-bg.png) repeat;
			margin-bottom: 20px;
			padding-left: 10px;
			line-height: 36px;
		}
		
		.model-title{
			line-height:30px;
			height:30px;
			margin-top:0px;
			padding-left:10px;
			background: #eee;
			color:#333;
		}
		
		.vip{
		    background: url(${ctx}/images/vip.png) no-repeat;
		    width: 49px;
		    height: 49px;
		    padding: 2px;
		    border: 1px solid #DBDBDB;
		    border-radius: 2px;
		    display: block;
		    margin: auto auto 5px auto;
		}
		
		.v0{
		    background-position: -133px -0px;
		}
		
		.v1{
		    background-position: -187px -0px;
		}
		
		.v2{
		    background-position: -241px -0px;
		}
		
		.v3{
		    background-position: -295px -0px;
		}
		
		.nav-tabs > li.active > a{
			border-radius:0;
			border:2px solid #ff5500 !important;
			border-bottom:none !important; 
			color:#666;
		}
		
		
		.nav-tabs > li > a{
			border-radius:0;
			color:#666;
			border: 1px solid #ccc;
    		margin-right: 0px;
		}
		
		.fm-sl{
    			text-align: center;
    			overflow: hidden;
    			margin-left:-16px;
    			list-style: none;
    			margin-top:22px;
    			padding-left:0px;
    		}
		    		
    		.fm-sl li{
    			height: 60px;
    			width:60px;
    			margin-left:16px;
    			display: inline-block;
    		}
    		
    		.fm-sl li a{
    			display: block;
    			float: left;
    		}
    		
    		.fm-sl li a img{
    			position: relative;
    			max-width:100%;
    			max-height:100%;
    		}
    		
    		.fm-sl li.tb-selected{
    			border: 2px solid #ff5500;
    		}
    		
    		.fm-sl li.tb-selected img{
    			width:56px;
    			height:56px;
    		}  
    		
    		.prodH {
			    background: #b4b4b4;
			    color: #fff;
			    width: 115px;
			    height: 24px;
			    text-align: center;
			    line-height: 24px;
			    font-size: 12px;
			    font-weight: normal;
			}

			.amount {
				    border: 1px dotted #d4d4d4;
				    border-width: 1px 0px;
				    height: 36px;
				    margin-top: 11px;
				}
				
			.amount p {
			    float: left;
			    width: 172px;
			    text-align: center;
			    border-right: 1px solid #e5dfda;
			    margin-top: 10px;
			    height: 16px;
			    line-height: 16px;
			    color:#999;
			    font-size:13px;
			}
					
			.amount p.last {
			    border: none;
			}

			.amount .red {
			    color: #c00;
			}
		
	</style>
</head>

<body>
	<tags:topPC/>
		
    <div class="container">
 
		
     
		<div class="row shop-box" style="margin-top:20px;">
		    <div class="col-sm-5 col-md-5" >
		    	<div class="thumbnail" style="border:1px solid #eee;margin:0px;padding:0px;border-radius:0;">
		    		<img alt="" class="img-box" src="">
		    	</div>
		    	
		    	
		    	<div>
		    		<ul id="fengmian_sl" class="fm-sl">
						<li class="fm-sl" id="fm_li_id" style="display: none;">
				 			<a href="#"><img src=""></a>
						</li>
					</ul>
		    	</div>
		      	  
	  		</div>
	  		
	  		<div class="col-sm-7 col-md-7" style="background:#F2F2F2;">
			    <div class="shopinfo" id="buy_div_id" style="margin-bottom:20px;"></div>    
			    
			    <div class="tm-fcs-panel" style="background: url('${ctx}/images/pdetailGoodsbg.png')";padding:5px;overflow: hidden;">
    		 	      
    				<div style="overflow: hidden;padding-left:10px;padding-top:10px;">   
    					<div style="float:left;color:#999;font-weight: normal;font-size:13px;">市场价格：</div> 
    					<div style="float:left;color:#999;font-size:13px;font-weight:normal;"><span>¥</span><span class="tm-price oldprice" id="oldprice" style="text-decoration: line-through;"></span><span id="discount" class="free_cost"></span></div>
    				</div>
    				<div  style="overflow: hidden;padding-left:10px;padding-bottom:10px;">
    					<div style="color:#c00;font-size:14px;float:left;line-height:30px;height:30px;">促销价：</div>
    					<div style="float:left;color:#c00;line-height:30px;height:30px;"><span style="font-size:18px;">¥</span><span class="tm-price" style="font-size:28px;" id="nowprice"></span></div>
    					<div style="float:right;background:#0F7B13;color:#fff;font-size:13px;height:30px;line-height: 30px;font-weight:bold;padding-left:10px;padding-right:10px;">    
    						顺丰包邮、货到付款 
    					</div>
    				</div>
    				
				</div>
			 
				<div class="amount">
					<p style="display:none;">用户评论 <b class="red comment"></b></p>
					<p class="last">月销售 <b class="red" id="lastsale_id"></b></p> 
<!-- 					<p class="last">库存剩余 <b class="red">32</b></p>  -->
				</div>
			    
			    <div class="infobox" style="margin-top:20px;">
			    	
			    	<div style="margin-top:10px;" class="clearfix">
			    	
			    		<div class="row">
			    			<div class="col-md-2 col-xs-3" style="font-size:13px;color:#999;line-height: 30px;padding-right:0px;width:59px;">
			    				<div style="margin-top:5px;">
			    					颜色：
			    				</div>
			    				
			    			</div>
			    			
			    			<div class="col-md-10 col-xs-9 colorlist" style="color:#333;padding-left: 0px;">
			    			 <div class="btn-toolbar" role="toolbar" style="line-height:26px;" id="color_div_id">
			    			    <!-- 文字颜色 -->
						        <div class="btn-group btn-group-sm group" id="color_model_id" style="display: none;position: relative;">
				          			<button type="button" class="btn btn-default color-button"></button>
					          		<img src="${ctx}/images/imgxuanzhongjiao.png" class="pordIxzj" style="display: none;"> 
						        </div>
						        
						        <!-- 图片颜色 -->
						        <div class="btn-group btn-group-sm group" id="color_img_model_id" style="display: none;position: relative;margin-top:5;">
				          			<a class="color-img-a"> 
			    						<img src="" class="color-img" style="cursor: pointer;"/>
			    						<div class="not-div" style="height:32px; position: absolute;left:0px;top:0px;z-index: 100px;cursor: not-allowed;background-image: url('${ctx}/images/colorimg.gif');display:none;"></div> 
		    					  	</a>
					          		<img src="${ctx}/images/imgxuanzhongjiao.png" class="pordIxzj" style="display: none;"> 
						        </div>
						        
						      </div>
			    			</div>
			    		</div>
			    		
			    		
			    	</div>
			    	
			    	
			    	
			    	<div style="margin-top:10px;" class="clearfix">
			    	
			    		<div class="row">
			    			<div class="col-md-2 col-xs-3" style="color:#999;line-height: 30px;padding-right:0px;width:59px;font-size:13px;">尺码：</div>
			    			
			    			<div class="col-md-10 col-xs-9 colorlist" style="color:#333;padding-left: 0px;">
			    			 <div class="btn-toolbar" role="toolbar" style="line-height:26px;" id="size_div_id">
						        <div class="btn-group btn-group-sm group" id="size_model_id" style="display: none;margin-top:0;">
						          <button type="button" class="btn btn-default" style="border-radius:0;"></button>
						          <img src="${ctx}/images/imgxuanzhongjiao.png" class="pordIxzj" style="display: none;">
						        </div>
						      </div>
			    			</div>
			    		</div>
			    		
			    		
			    	</div>
			    	
			    	<div style="margin-top:20px;" class="clearfix">
			    		<span style="color:#999;float:left;font-size:13px;">数量：</span>
			    		<div style="float:left;margin-left:10px;">
			    			<a href="#" style="text-decoration:none;color:#000;padding:5px 10px 5px 10px;border:1px solid #b5b5b5;background: #efefef;" class="reduce">-</a>
                            <span class="buyNum" style="padding:6px 10px;color:#000;border:1px solid #ccc;">1</span>
                    		<a href="#" class="add" style="text-decoration:none;color:#000;padding:5px 10px 5px 10px;border:1px solid #b5b5b5;background: #efefef;">+</a> 
                        </div>
			    	</div>
			    </div>
			    
			    <div class="buy" style="margin-bottom:10px;">
			    	<a type="button" id="register_btn" data-buy="yes" class="btn btn-lg add-scart btn-pfwm-yellow" href="${ctx }/pcart"  style="background: #c00;width: 180px;height: 40px;float: left;font-size: 16px;color: #fff;font-family: \5FAE\8F6F\96C5\9ED1;margin-right: 14px;border-radius:0;">立即购买</a>
			    	<a type="button" id="add_cart_id" class="btn btn-lg btn-buy add-scart" href="${ctx }/paddCart"  style="background: #ff5500;width: 180px;height: 40px;float: left;font-size: 16px;color: #fff;font-family: \5FAE\8F6F\96C5\9ED1;margin-right: 14px;border-radius:0;"> 加入购物车</a>
			    </div>
	            
	  		</div>
	  		
  		</div>
  		<div class="prodH" style="display:none;">你可能还喜欢：</div>
  		<div class="row" style="border:1px solid #ccc;display: none;margin-left:0px;margin-right:0px;" id="mabe_like_id">
					
					<div id="shop_recommend_id">
						<!-- col1 -->
					    <div class="col-sm-2 col-md-2" id="col_id0">
							    	
				  		</div>
				  		
				  		<!-- col2 -->
				  		<div class="col-sm-2 col-md-2" id="col_id1">
							    	
				  		</div>
				  		
				  		<!-- col3 -->
				  		<div class="col-sm-2 col-md-2" id="col_id2">
							    	
				  		</div>
				  		
			  			<!-- col4 -->
				  		<div class="col-sm-2 col-md-2" id="col_id3">
							    	
				  		</div>
				  		
				  		
			  			<!-- col5 -->
				  		<div class="col-sm-2 col-md-2" id="col_id4">
							    	
				  		</div>
				  		
				  		
			  			<!-- co6 -->
				  		<div class="col-sm-2 col-md-2" id="col_id5">
							    	
				  		</div>
				  		
				  	
					</div>
		</div>
  		
  		<div class="row" style="margin-top:20px;" id="fix-nav">
  			
  			
    		<div class="col-sm-9 col-md-9" id="goods_detail_id" style="display: none;">
    			<div class="bs-example bs-example-tabs">
				      <ul id="myTab" class="nav nav-tabs" style="z-index: 1000;background-color:#fff;border-top:1px solid #ccc;border-bottom:1px solid #ff5500;">
				        <li class="active" id="home_a"> <a href="#home" data-toggle="tab">商品详情</a></li>
				        <li class="" style="display:none;"><a href="#comment" id="comment_a" data-toggle="tab">用户评论</a></li>
				        <li class="" style="float: right;display: none;">
				        	<button type="button" id="go_buy" class="btn btn-lg btn-buy">立即购买</button>
				        </li>
				      </ul>
				      <div id="myTabContent" class="tab-content">
				        <div class="tab-pane fade active in" id="home">
				        	<div id="subPicBox" class="thumbnail" style="border-top:0px;padding: 0px;">
								
								<!-- begin 商品详情信息 -->
				        		<div  id="goods_content" >
				        			 
								   
				        		
				        		</div>
				        		<!-- end 商品详情信息 -->
				        		
				        		<div class="thumbnail" style="border:0px;margin-bottom:0px;display: none;" id="sub_pic_model">
				        			<img class="lazyImg" src="${ctx}/images/loading.png" data-url=""/>
				        		</div>
				        		
					        </div>
					        
					        <!-- begin商品温馨提示 -->
					        <div style="margin-top:15px;margin-bottom:10px;display: none;" id="tips_div" > 
						    	<div style="color:#999;font-size:20px;">
						    		名鞋团购网温馨提示：
						    	</div>
						    	<div style="font-size:16px;color:#999;" class="tips"> 
						    		
						    	</div>
						    </div>
						    <!-- end商品温馨提示 -->
				        </div>
				        
				        <div class="tab-pane fade" id="comment">
					        <li class="list-group-item" id="comment_model_id" style="display:none;border-top:0px;">
								  	<div class="row">
								  		<div class="col-md-1">
								  			<div class="vip v0">
								  			
								  			</div>
								  		</div>
								  		<div class="col-md-11">
								  			<div class="list-group">
											  	<div class="row" id="star">
											  		<div class="col-md-3">
											  			<span class="username" style="color:#ff5500;font-size:12px;"></span>
											  		</div>
											  		
											  		<div class="col-md-9">
											  			<ul class="star">
															<li class="li-1"><a href="javascript:;">1</a></li>
															<li class="li-2"><a href="javascript:;">2</a></li>
															<li class="li-3"><a href="javascript:;">3</a></li>
															<li class="li-4"><a href="javascript:;">4</a></li>
															<li class="li-5"><a href="javascript:;">5</a></li>
														</ul>
														
														<span style="color:#999;font-size:12px;" id="star_des_id"></span>	
											  		</div>
											  		
											  	</div>
											    <div style="color:#000;font-size:12px;margin-top:4px;margin-bottom:4px;" class="comment-content"></div>
											    <div style="color:#999;font-size:12px;" class="comment-date"></div>
											</div>
								  			
								  		</div>
								  	</div>
								  </li>
				        	<ul class="list-group" id="comment_div_id" style="list-style: none;">
							</ul>
							
							<div id="pager" align="center"></div>
				        </div>
				       
				      </div>
			    </div>
			   
    		</div>
    		
    		
    		
    		<div class="col-sm-3 col-md-3 more-team" id="more_team_id" style="display: none;">
    			<h4>更多新品</h4>
    			<div id="moretuangou">
    			</div>
    			
    		</div>
    	</div>
    	
    	
		
		<!-- begin model -->
			<div class="thumbnail goodsbox" style="display: none;margin-top:5px;margin-bottom:5px;border-radius:0;" id="goods_recommend_model">
<!-- 			      <a href="#" target="_blank" class="title-a" style="text-decoration: none;"><h6 class="title ellipsis" style="color:#666;"></h6></a> -->
			      <a href="#" target="_blank"  class="img-a"><img alt="" src="${ctx }/images/loading.png"></a>
			      <div class="caption">
			        
			        <p>
			        	<strong class="nowprice" style="color:#F76120;font-size:16px;"></strong>
			        	<span class="oldprice" style="color:#9F9F9F;font-size:14px;text-decoration:line-through;"></span>
			        </p>
			      </div>
			</div>
		<!-- end model -->
		
		
		
    </div>
    
    
	
	<tags:bottomPC/>
 	
	<div class="thumbnail" id="goods_new_model" style="display: none;border-radius:0;">
<!-- 		<a href="#" target="_blank" class="title-a" style="text-decoration: none;"><h6 class="title ellipsis" style="color:#666;"></h6></a> -->
		<a href="#" class="img-a" target="_blank"><img alt="" src="${ctx }/images/loading.png"/></a>
    	<div class="caption">
	         <p class="content" style="margin:0px;">
	        	<strong class="nowprice" style="color:#F76120;font-size:20px;font-weight: bold;height: 31px;line-height: 31px;"></strong>
	        	<span style="color:#9F9F9F;font-size:12px;">原价</span><span class="oldprice" style="color:#9F9F9F;font-size:12px;text-decoration:line-through;"></span>
	        	<span class="discount" style="background: #ff5500;color:#FFF;font-size:12px;">折扣</span>
        	</p>
        </div>
   	</div>
   	<script src="${ctx}/js/stickUp/stickUp.min.js"></script>
	<script>
		$(function(){
			if(jWei.util.isPC()){
				$("#safe_desc").show();
			}
			//是否显示颜色图片，默认false		
			var isColorPic = false;
			
			//设置商品详细信息
			jQuery.ajax({
					type : 'Get',
					contentType : 'application/json',
					url : '${ctx}/goods/get.do',
					async:false,
					data : {
						id : "${id}",
					},
					dataType : 'json',
					success : function(data) {
						if(data.result){
							var obj = data.obj;
							//设置商品基本信息
							var goods = obj.goods;
							$(".shop-box .img-box").attr("src","${ctx }/upload/download.do?fileName="+goods.picName).data("pic",goods.picName);
							$(".shop-box .img-box").attr("alt",goods.title);
							$(".shop-box .shopinfo").html(goods.title);
							$(".shop-box #lastsale_id").html(goods.buyNum+"件"); 
							$(".shop-box #nowprice").html(goods.nowPrice);  
							//$(".fix-nowprice").html("￥"+obj.nowPrice);
							$(".shop-box .free_cost").html("（"+goods.discount+"折）");
							$(".shop-box .oldprice").html(goods.price);
							$("#brand_tips").attr("data-brand",goods.brandsId);
							$("#title_tips").html(goods.title).attr("href","${ctx}/pdetailGoods/"+goods.id);
							
							
							//设置颜色信息
							var colorList = obj.colorList;
							if(colorList){
								if(colorList[0] && colorList[0].pic){
									isColorPic = true;
								}
								for(var j = 0;j<colorList.length;j++){
									var color = colorList[j];
									//颜色显示图片
									if(isColorPic){
										var colorModel = $("#color_img_model_id").clone();
										colorModel.find(".color-img").data("id",color.id).data("pic",color.pic).attr("title",color.color).attr("src",_ctx+"/upload/downloadCompress.do?fileName="+color.pic).data("color",color.color);
										colorModel.show();
										$("#color_div_id").append(colorModel);
									//颜色显示文字
									}else{
										var colorModel = $("#color_model_id").clone();
										colorModel.find("button").html(color.color).data("id",color.id).data("pic",color.pic).data("color",color.color);
										colorModel.show();
										$("#color_div_id").append(colorModel);
									}
									 
								}
								
								
							}
							
							//设置尺码信息
							var sizeList = obj.sizeList;
							if(sizeList){
								for(var k = 0 ;k<sizeList.length;k++){
									var size = sizeList[k];
									var sizeModel = $("#size_model_id").clone();
									sizeModel.find("button").html(size.size).data("id",size.id);	
									sizeModel.show();
									$("#size_div_id").append(sizeModel);
								}
								
								
							}
							
							//设置商品详情信息
							//$("#goods_content").append(goods.content);
							
							//封面缩略图
							var titlePicList = obj.titlePicList;
							
							
							var ul = $("#fengmian_sl");
							for(var j = 0;j<titlePicList.length;j++){
								
								var titlePic = titlePicList[j];
								var titlePicUrl = ""; 
								if(titlePic.name.indexOf("http") != -1){
									titlePicUrl = titlePic.name;
								}else{ 
									titlePicUrl = "${ctx }/upload/download.do?fileName="+titlePic.name;
								}
								var newLi = $("#fm_li_id").clone();
								if(j ==0){
									$(".img-box").attr("src",titlePicUrl);
									newLi.addClass("tb-selected");
								}
								newLi.attr("id","");
								newLi.find("img").attr("src",titlePicUrl).data("pic",titlePic.name);
								ul.append(newLi);
								
								newLi.show();
							}
							
							$(".fm-sl img").mouseenter(function(){
								if(!$(this).parent().parent().hasClass("tb-selected")){
									var pic = $(this).data("pic");
									if(pic.indexOf("http") != -1){
										$(".img-box").attr("src",pic);
									}else{
										$(".img-box").attr("src","${ctx}/upload/download.do?fileName="+pic);
									}
									
									$(".tb-selected").removeClass("tb-selected");
									$(this).parent().parent().addClass("tb-selected");
								}
								return false;
							});
							
							var picList = obj.picList;
							
							for(var i = 0 ;i<picList.length;i++){
								var picHeight = 200;
								if(jWei.util.isMobile()){
									picHeight = 120;
									if(picList[i].height <120){
										picHeight =picList[i].height;
									}
								}else{
									if(picList[i].height <200){
										picHeight =picList[i].height;
									}
								}
								//默认先加载2张图片
								var html = "";
								var picDesc = picList[i].picDesc;
								
								var picUrl = ""; 
								if(picList[i].name.indexOf("http") != -1){
									picUrl = picList[i].name;
								}else{
									picUrl = "${ctx }/upload/download.do?fileName="+picList[i].name;
								}
								if(i<2){
									if(picDesc){
										html = '<div class="pic-desc">'+picDesc+'</div><div class="thumbnail" style="border:0px;margin-bottom:0px;padding:0px; min-height:'+picHeight+'px;"><img class="lazyImg" src="'+picUrl+'"/></div>';
									}else{
										html = '<div class="thumbnail" style="border:0px;margin-bottom:0px;padding:0px; min-height:'+picHeight+'px;"><img class="lazyImg" src="'+picUrl+'"/></div>';
									}
								}else{
									if(picDesc){ 
										html = '<div class="pic-desc">'+picDesc+'</div><div class="thumbnail" style="border:0px;margin-bottom:0px;padding:0px; min-height:'+picHeight+'px;"><img class="lazyImg" src="${ctx}/images/d_loading.gif" data-url="'+picUrl+'"/></div>';	
									}else{
										html = '<div class="thumbnail" style="border:0px;margin-bottom:0px;padding:0px; min-height:'+picHeight+'px;"><img class="lazyImg" src="${ctx}/images/d_loading.gif" data-url="'+picUrl+'"/></div>';
									}
								}
								
								$("#subPicBox").append(html);
							}
							//显示商品详情信息
							$("#goods_detail_id").show();
							$(".lazyImg").scrollLoading();
							
							//设置温馨提示
			            	if(goods.tips){
			            		$("#tips_div").show();
			            		$("#tips_div .tips").html(goods.tips);
			            	}
			            	
							
						}
						
					}
			  });
			
			
			//设置商品详情和购买的固定导航条效果
			var width = $("#myTab").outerWidth();
			$("#myTab").css("width",width);
			
			$("#go_buy").click(function(){
				$("html,body").animate({scrollTop:$("#buy_div_id").offset().top},100);//1000是ms,也可以用slow代替
				return false;
			});
			
			$("#home_a,#comment_a").click(function(){
				$("html,body").animate({scrollTop:$("#fix-nav").offset().top-1},100);//1000是ms,也可以用slow代替
			});
			
			//$("#myTab").stickUp();
			
			
			
			
			
			//设置更多团购信息
			var currMore =Math.floor(Math.random()*11)+1;
	        $.get("${ctx}/goods/goodsListByGrade.do?pageSize=12&grade=1&currPage="+currMore, function(data){
	        	
	        	var dataObj = $.parseJSON(data);
	        	
	        	var list = dataObj.obj.goodsList;
	        	for(var i = 0 ;i<list.length;i++){
	        		if("${id}" != list[i].id){
	        			var model = $("#goods_new_model").clone();
		        		var goods = list[i];
		            	$("#moretuangou").append(model);
		            	model.find(".img-a").attr("href","${ctx}/pdetailGoods/"+goods.id);
		            	if(goods.picName.indexOf("http") != -1){
			            	model.find("img").attr("data-url",goods.picName).attr("title",goods.title).attr("alt",goods.title);
		            	}else{
			            	model.find("img").attr("data-url","${ctx}/upload/downloadCompress.do?fileName="+goods.picName).attr("title",goods.title).attr("alt",goods.title);
		            	}
		            	model.find(".title").html(goods.title);
		            	model.find(".nowprice").html("￥"+goods.nowPrice);
		            	model.find(".discount").html(goods.discount+"折");
		            	model.find(".btn").attr("href","${ctx}/pdetailGoods/"+goods.id);
		            	model.find(".oldprice").html(goods.price);
		            	model.show();	
	        		}
	        	}
	        	$("#more_team_id").show();
	        	$("#moretuangou img").scrollLoading();
	        });	
			  
			  
			  //绑定加入购物车操作
			  $(".add-scart").each(function(){
				    var that = $(this);
					$(this).click(function(){
						//验证是否选择了颜色
						var colorDom = $("#color_div_id .current");
						if(colorDom.size() <=0){
							alert("请选择商品颜色！");
							return false;
						}
						
						//验证是否选择了尺码
						var sizeDom = $("#size_div_id .current");
						if(sizeDom.size() <=0){
							alert("请选择商品尺码！");
							return false;
						}
						if($(".buyNum").html() == 0){
					  		alert("商品数量不能为0");
					  		return false;
					  	}
						var num = $(".buyNum").html();
						var pic = $(".shop-box .img-box").data("pic");
						
						jQuery.ajax({
							type : 'Get',
							contentType : 'application/json',
							url : '${ctx}/cart/addCart.do',
							data : {
								goodsId : "${id}",
								num: num,
								color: colorDom.data("color"),
								size: sizeDom.html(),
								pic:pic
							},
							async:false,
							dataType : 'json',
							success : function(data) {
								if(that.data("buy") == "yes"){
									window.location.href = "${ctx}/pcart";
								}else{
									window.location.href = "${ctx}/paddCart/${id}/"+num;
								}
							}
						});
						
						return false;
					});
				});
				
			
			$('#myTab a').click(function (e) {
				  //e.preventDefault();
				  $(this).tab('show');
			});
			
			//增加数量按钮
			$(".add").click(function(){
				var num = $(".buyNum").html();
				$(".buyNum").html(parseInt(num)+1);
				return false;
			});
			
			//减少数量按钮
			$(".reduce").click(function(){
				var num = $(".buyNum").html();
				if(num != 1){
					$(".buyNum").html(parseInt(num)-1);	
				}
				return false;
			});
			
			//绑定颜色按钮
			$("#color_div_id").on("click",".color-button,.color-img",function(){
				
				if($(this).hasClass("current")){
					$(this).removeClass("current"); 
					//隐藏选中的钩钩
					$(this).closest(".btn-group-sm").find(".pordIxzj").hide(); 
					$("#size_div_id button").each(function(){
						$(this).prop("disabled",false).removeClass("not");
					});
				}else{
					//移除原来选择颜色
					$("#color_div_id .current").closest(".btn-group-sm").find(".pordIxzj").hide();
					$("#color_div_id .current").removeClass("current");
					
					$(this).addClass("current");
					//显示选中的钩钩
					$(this).closest(".btn-group-sm").find(".pordIxzj").show();
					
					var	colorId = $(this).data("id");
							
					jQuery.ajax({
						type : 'Get',
						contentType : 'application/json',
						url : '../goods/getColorSizeItemListByColorId.do',
						data : {
							colorId:colorId
						},
						dataType : 'json',
						async:false,
						success : function(data) {
							if(data.result){
								var colorSizeItemList = data.obj;
								var sizeIds = [];
								if(colorSizeItemList){
									for(var i = 0;i<colorSizeItemList.length;i++){
										var sizeId = colorSizeItemList[i].sizeId;
										sizeIds.push(sizeId);
									}
								}
								
								$("#size_div_id button").each(function(){
									var id = $(this).data("id");
									if(jQuery.inArray( id, sizeIds) == -1){
										$(this).addClass("not").prop("disabled",true);
									}else{
										$(this).prop("disabled",false).removeClass("not");
									}
								});
							}
						}
					});
					
				}
				
				//将封面图片改成当前颜色图片
				var pic = $(this).data("pic");
				if(pic){
					$(".shop-box .img-box").attr("src","${ctx }/upload/download.do?fileName="+pic).data("pic",pic);					
				}
				
				return false; 
				
			});
			
			//绑定尺寸按钮
			var isCalNotDiv = false;
			$("#size_div_id").on("click","button",function(){
				//计算颜色图片遮罩宽度
				if(isColorPic && !isCalNotDiv){
					$("#color_img_model_id .color-img").each(function(){
							$(this).parent().find(".not-div").css("width",$(this).outerWidth());	
					});
					isCalNotDiv = true;
				}
						
				if($(this).hasClass("current")){
					$(this).removeClass("current");
					//隐藏选中的钩钩
					$(this).parent().find(".pordIxzj").hide(); 
					//图片颜色
					if(isColorPic){
						$("#color_div_id .color-img").each(function(){
							$(this).parent().find(".not-div").hide();
							$(this).removeClass("not-img");
						});
					//文字颜色
					}else{
						$("#color_div_id button").each(function(){
							$(this).prop("disabled",false).removeClass("not");
						});
					}
					
				}else{
					//移除原来选择颜色
					$("#size_div_id .current").parent().find(".pordIxzj").hide();
					$("#size_div_id .current").removeClass("current");
					$(this).addClass("current");
					//显示红色钩钩
					$(this).parent().find(".pordIxzj").show();
					var sizeId = $(this).data("id");
					jQuery.ajax({
						type : 'Get',
						contentType : 'application/json',
						url : '../goods/getColorSizeItemListBySizeId.do',
						data : {
							sizeId:sizeId
						},
						async:false,
						dataType : 'json',
						success : function(data) {
							if(data.result){
								var colorSizeItemList = data.obj;
								var colorIds = [];
								if(colorSizeItemList){
									for(var i = 0;i<colorSizeItemList.length;i++){
										var colorId = colorSizeItemList[i].colorId;
										colorIds.push(colorId);
									}
								}
								//图片颜色
								if(isColorPic){
									$("#color_div_id .color-img").each(function(){
										var id = $(this).data("id");
										if(jQuery.inArray( id, colorIds) == -1){
											$(this).parent().find(".not-div").show();
											$(this).addClass("not-img");
										}else{
											$(this).parent().find(".not-div").hide();
											$(this).removeClass("not-img");
										}
									});
								
								//文字颜色
								}else{
									$("#color_div_id button").each(function(){
										var id = $(this).data("id");
										if(jQuery.inArray( id, colorIds) == -1){
											$(this).addClass("not").prop("disabled",true);
										}else{
											$(this).prop("disabled",false).removeClass("not");
										}
									});
									
								}
								
							}
						}
					});
				}
				
			});
			
			//设置购买了该商品的用户还购买了
			  (function(){
				    var currP =Math.floor(Math.random()*11)+1;
				    //如果当前页数和更多团购一样重新随机
				    while(currP == currMore){
				    	currP =Math.floor(Math.random()*11)+1;
				    }
				    
				    //设置可能还喜欢
					  jQuery.ajax({
							type : 'Get',
							contentType : 'application/json',
							url : "${ctx}/goods/goodsListByGrade.do?pageSize=12&grade=1&currPage="+currP, 
							async:false,
							data : {
								id : "${id}",
							},
							dataType : 'json',
							success : function(dataObj) {
					        	var list = dataObj.obj.goodsList;
					        	for(var i = 0 ;i<list.length;i++){
					        		var model = $("#goods_recommend_model").clone();
					        		var goods = list[i];
					        		var price = goods.price;
									$("#shop_recommend_id #col_id"+i%6).append(model);
									if(goods.picName.indexOf("http") != -1){
						            	model.find("img").attr("data-url",goods.picName).attr("title",goods.title).attr("alt",goods.title);
									}else{
						            	model.find("img").attr("data-url","${ctx}/upload/downloadCompress.do?fileName="+goods.picName).attr("title",goods.title).attr("alt",goods.title);
									}
					            	model.find(".title").html(goods.title);
					            	model.find(".img-a").attr("href","${ctx}/pdetailGoods/"+goods.id);
					            	model.find(".nowprice").html("￥"+goods.nowPrice);
					            	model.find(".oldprice").html("￥"+price);
					            	model.show();  
					        	}
					        	
					        	$("#shop_recommend_id img").scrollLoading();
					        	//$("#mabe_like_id").show();
								
							}
					  });
				})();
			
			 
			
				//评论分页回调函数  
				var PageClick = function(pageclickednumber) {
					getComments(pageclickednumber);
					$("html,body").animate({scrollTop:$("#fix-nav").offset().top-1},400);//1000是ms,也可以用slow代替
				};
				
				//获取评论信息
				getComments(1);
				//评论函数
				function getComments(currPage) {
					var aMsg = [ "", "很不满意|差得太离谱，与卖家描述的严重不符", "不满意|部分有破损，与卖家描述的不符",
							"一般|质量一般，没有卖家描述的那么好", "满意|质量不错，与卖家描述的基本一致",
							"非常满意|质量非常好，与卖家描述的完全一致" ];

					jQuery.ajax({
								type : 'Get',
								contentType : 'application/json',
								url : '${ctx}/comment/pageListForHome.do',
								data : {
									goodsId : "${id}",
									currPage:currPage
								},
								async:false,
								dataType : 'json',
								success : function(data) {
									if (data.result) {
										$(".amount .comment").html(data.obj.totalCount);
										$("#comment_div_id").hide().html("");
										$("#pager").pager({
											pagenumber : currPage,
											pagecount : data.obj.totalPage,
											isShowPrev:true,
											buttonClickCallback : PageClick
										});
										
										
										var voList = data.obj.list;
										
										for ( var i = 0; i < voList.length; i++) {
											var comment = voList[i].comment;
											var newModel = $("#comment_model_id").clone();
											
											newModel.find(".username").html(comment.username);
											newModel.find(".comment-content").html(comment.content);
											newModel.find(".comment-date").html(voList[i].updateDate);
											
											var vipran =Math.floor(Math.random()*5);
											newModel.find(".vip").addClass("v"+vipran);
											var grade = comment.grade;
											newModel.find("#star_des_id").html(aMsg[grade]);
											for ( var j = 1; j <= grade; j++) {
												newModel.find(".li-" + j).addClass("on");
											}
											newModel.show();
											$("#comment_div_id").append(newModel);
										}
										if (voList.length == 0) {
											$("#comment_div_id").append('<div style="margin-top:20px;color:#666;font-size:14px;" align="center">该商品暂时没有评论信息！</div>');
										}
									} else {
										$("#comment_div_id").append('<div style="margin-top:20px;color:#666;font-size:14px;" align="center">加载评论信息失败！</div>');
									}
									
									$("#comment_div_id").fadeIn(1200);
								},
								error : function(data) {
									$("#comment_div_id").append('<div style="margin-top:20px;color:#666;font-size:14px;" align="center">加载评论信息失败！</div>');
								}
							});
						}
		});
	</script>
	
</body>